﻿#parse("partials/header.html") #parse("partials/sidebar.html")
<link rel='stylesheet' type='text/css' href='/Scripts/plugins/fullcalendar/fullcalendar.css' />
<script type='text/javascript' src='/Scripts/plugins/fullcalendar/fullcalendar.js'></script>
<!--<script src="/Scripts/JSon/json.js" type="text/javascript"></script>-->
<script src="/Scripts/JSon/json2.js" type="text/javascript"></script>
<script src="/Scripts/date.js" type="text/javascript"></script>
<script type="text/javascript">
    var doctorId = '$DoctorId';

    $(document).ready(function () {
        

        //validation
//        jQuery("#dialog_form").validationEngine();
//        jQuery("#dialog_form").submit(
//            function () {
//                if (jQuery("#dialog_form").valid() == false) {
//                    alert(jQuery("#dialog_form").valid());
//                    return false;
//                }

//                return true;
//            });




    });

</script>
<div id ="mws-popup-appointment-dialog">
  <iframe id="modalIframeappointment" width="100%" height="100%" marginwidth="0"
        marginheight="0" frameborder="0" scrolling="auto" title="Dialog Title">Your browser
        does not support</iframe>
</div>
<div id="mws-evencalendar-dialog">
<form action="#" id="mws-validate-tanto">
    <div class="mws-form" action="#">
        <div class="mws-form-inline">
            <div class="mws-form-row">
                <label>
                    Patient Name</label>
                <div class="mws-form-item large">
                    <div class="mws-form-cols clearfix">
                        <div class="mws-form-col-8-8">
                            <div class="mws-form-item">
                                <input type="text" class="mws-textinput required" name="title" id="title" maxlength="30" />
                                <input type="hidden" id="doctorid" value='' name="doctorid" />
                                <input type="hidden" id="startdate" value='' name="startdate" />
                                <input type="hidden" id="enddate" value='' name="enddate" />
                                <input type="hidden" id="idAp" value='' name="enddate" />
                                <input type="hidden" id="patientid" value='' name="patientid" />

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mws-form-row">
                <label>
                    Telp</label>
                <div class="mws-form-item large">
                    <div class="mws-form-cols clearfix">
                        <div class="mws-form-col-8-8">
                            <div class="mws-form-item">
                                <input type="text" class="mws-textinput required" name="telp" id="telp" maxlength="30" />
                               
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br />
        <div class="mws-button-row">
            <input name="btnAction" class="mws-button red" type="submit" value="Save" id="btnAction" />
            <input name="btnDelete" class="mws-button red" type="submit" value="Delete" id="btnDelete" />
        </div>
    </div>
    </form>
</div>
<div id="mws-container" class="clearfix">
    <!-- Inner Container Start -->
    <div class="container">
        <!-- Panels Start -->
        <!-- <input type="button" value="tes" onclick="OpenPopUp()" /> -->
        <div class="mws-panel grid_8 mws-collapsible">
            <div class="title-caption">
                <h5>$headerinformation - Appointment</h5>
            </div>
            <div class="mws-panel-header">
                <span class="mws-i-24 i-calendar-today">Doctor Schedule   $DoctorName / Specialist Of $Specialist</span>
            </div>
            <div class="mws-panel-body">
                <div class="mws-panel-toolbar top clearfix">
                    <ul>
                        <li><a class="mws-ic-16 ic-application-view-list" href="/frontoffice/appointment/" title="Search">Search
                            Schedule</a></li>
                       
                    </ul>
                </div>
                <!-- <div id="notif">
                    $Notification
                </div>-->
                <!--<input id="hiddenDoctorId" type="hidden" value='$DoctorId' />-->
                <div class="mws-form">
                <div class="grid_8">
                    <div id="mws-calendar-aw">
                    </div>
                </div>
                </div>
                <div class="clear">
                </div>
            </div>
        </div>
        <!-- Panels End -->
    </div>
    <!-- Inner Container End -->
    <!-- Footer -->
    
    <div id="mws-footer">
        Copyright Siloam Hospital 2012. All Rights Reserved.
    </div>
</div>


<!-- Inner Container End -->
#parse("partials/footer.html") 

<script type="text/javascript">

    
    

    $("#mws-evencalendar-dialog").dialog({
        autoOpen: false,
        modal: true,
        width: "500",
        height: "250",
        zIndex: "9999"
    });

    $("#mws-popup-appointment-dialog").dialog({
        autoOpen: false,
        modal:true,
       
    });

    $("#btnAction").click(function () {
        
        
        if ($("#mws-validate-tanto").valid() == true) {
            var eventToSave = new Object();
            eventToSave.doctorid = doctorId;

            eventToSave.start = $("#startdate").val();
            eventToSave.end = $("#enddate").val();
            eventToSave.title = $("#title").val();
            eventToSave.id = $("#idAp").val();
            eventToSave.patientid = $("#patientid").val();
            eventToSave.phone = $("#telp").val();


            jQuery.ajax({
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify(eventToSave),
                url: "${rooturl}frontoffice/appointment/prosessajax",
                dataType: "json",
                success: function (data) { // data will be string empty if success otherwise it is error
                    if (data.length == 0) { 
                        calendar.fullCalendar('refetchEvents')
                        $("#mws-evencalendar-dialog").dialog("close");
                    }
                    else {
                        alert("Doctor schedule is not exist \n (" + data + ")");
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("Data is not in doctor schedule");
                }
            });
        }
        return false;


    });



    $("#btnDelete").click(function () {
        var idToDelete = $("#idAp").val()
        jQuery.ajax({
            type: "POST",
            data: { id: idToDelete },
            url: "${rooturl}frontoffice/appointment/deleteajax",

            success: function (data) {
                //calendar.fullCalendar('removeEvents', idToDelete);
                calendar.fullCalendar('refetchEvents')
                $("#mws-evencalendar-dialog").dialog("close");
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("error deleting data.....");
            }
        });
    });





    var calendar = $('#mws-calendar-aw').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultView: 'agendaWeek',
        slotMinutes: 15,
        selectable: true,
        selectHelper: true,

        select: function (start, end, allDay) {

            if (allDay)
                return;

            jQuery.ajax({
                url: rooturl + "frontoffice/appointment/isitexistschedule/",
                dataType: "json",
                data: {
                    doctorId: doctorId,
                    dayOfWeek: start.getDay(), 
                    startDt: formatDate(start, "yyyy-MM-dd HH:mm"),
                    endDt: end

                }
                ,
                success: function (data) {
                   // data is true or false
                   if (data)
                   {

                        $("#startdate").val(formatDate(start, "yyyy-MM-dd HH:mm"));
                        $("#enddate").val(formatDate(end, "yyyy-MM-dd HH:mm"));
                        $("#title").val("");
                        $("#idAp").val("0");
                        $("#telp").val("");
                        $("#patientid").val("0");

                        $("#mws-evencalendar-dialog").dialog("open");
                        $("#btnDelete").hide();
 
                        $("#mws-validate-tanto").validate().resetForm();
                    }
                    else
                    {
                        calendar.fullCalendar('unselect');

                    }
                }

            });

        },
        eventClick: function (calEvent, jsEvent, view) {
            if (calEvent.allDay)
                return;

            jQuery.ajax({
                url: rooturl + "frontoffice/appointment/searchappointment/",
                dataType: "json",
                data: {
                    id: calEvent.id
                }
                ,
                success: function (data) {
                   

                    $("#idAp").val(calEvent.id);
                    $("#startdate").val(formatDate(calEvent.start, "yyyy-MM-dd HH:mm"));
                    $("#enddate").val(formatDate(calEvent.end, "yyyy-MM-dd HH:mm"));

                    $("#telp").val(data.phone);
                    $("#patientid").val(data.patientid);
                    $("#title").val(data.title);

                    $("#mws-validate-tanto").validate().resetForm();
                }

            });




            $("#mws-evencalendar-dialog").dialog("open");
            $("#btnDelete").show();


        },

        editable: false,
        events: {
            url: '/frontoffice/appointment/getjson/',
            type: 'POST',
            data: {
                doctorid: doctorId

            },
            error: function () {
                alert('there was an error while fetching events!');
            }
        }

    });
    function OpenPopUp() {
        $("#mws-popup-appointment-dialog").dialog("open");
        $("#modalIframeappointment").attr("src", rooturl + "frontoffice/appointment/popupappointment");
        return false;
    }
    $("#Button1").click(function () {
        alert("ooookkk");
        OpenPopUp();
    });

    //auto complete
    $("#title").autocomplete({
        source: function (request, response) {
            jQuery.ajax({
                url: rooturl + "frontoffice/appointment/searchpatient/",
                dataType: "json",
                data: {
                    name: request.term
                }
                ,
                success: function (data) {
                    response(data);
                    $("#patientid").val("0");
                }

            });
        },
        minLength: 3,
        select: function (event, ui) {
            $("#telp").val(ui.item.phone);
            $("#patientid").val(ui.item.id);
           
        },
        delay: 300

    });

     $("#mws-validate-tanto").submit(function(){
        $("#mws-validate-tanto").validate();
        return false;
     });

    


</script>